<template>
  <div class="c-pz1002 c-w100 c-h c-pf c-p-l0 c-p-t0 c-flex-row c-flex-center c-translucent-balck50 c-fs24" v-show="showModal || enablePlayAferStreamNone">
    <section v-if="showModal && !isShowQrcode" class="c-bg-white c-ww500 c-hh500 c-flex-column c-flex-center c-br20 c-p">
      <i class="iconfont c-fs20 c-fc-gray c-ph16 c-pv16 c-pa c-p-t0 c-p-r0" @click="closeModal">&#xe8fd;</i>
      <img src="@/assets/i/wap/course/disable_play.png" class="c-ww380" alt="">
      <div class="c-pt32 c-pb40">当前课程不支持在此浏览器访问</div>
      <div @click="clickShowQrcode" class="c-ww400 c-hh60 c-br30 c-flex-row c-flex-center theme-bg-gradient c-fc-white">扫码开始学习</div>
    </section>

    <section v-if="isShowQrcode" class="c-flex-column c-flex-center">
      <div class="c-bg-white c-ww500 c-hh500 c-flex-column c-flex-center c-br20">
        <span class="c-pb30 c-fs28 c-fw-b">扫码访问</span>
        <img :src="qrCode" class="c-ww250 c-hh250" alt="">
        <span class="c-pt30">请用手机扫码访问学习当前课程</span>
      </div>
      <div @click="closeModal" class="c-pt30 c-fc-white c-text-decoration-underline">点击继续访问</div>
    </section>

    <!--访问流量超过后提示不能播放-->
    <section v-if="enablePlayAferStreamNone" class="c-bg-white c-ww500 c-hh500 c-flex-column c-flex-center c-br20 c-p">
      <i class="iconfont c-fs20 c-fc-gray c-ph16 c-pv16 c-pa c-p-t0 c-p-r0" @click="enablePlayAferStreamNone = false;">&#xe8fd;</i>
      <img src="@/assets/i/wap/course/disable_play.png" class="c-ww380" alt="">
      <div class="c-pt32 c-pb40">{{fromPageType == 2 ? '资料无法下载' : '视频无法观看'}}，请联系管理人员！</div>
      <div @click="enablePlayAferStreamNone = false;" class="c-ww400 c-hh60 c-br30 c-flex-row c-flex-center theme-bg-gradient c-fc-white">我已知道</div>
    </section>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
export default {
   data() {
    return {
      showModal: false,
      qrCode: '',
      isShowQrcode: false,
      enablePlayAferStreamNone: false, // 没有流量后是否允许播放
      isOver: 0, // 是否超出流量
      fromPageType: 1 //2:资料 1:其他
    }
  },
  activated() {
    this.initData();
  },
  mounted() {
    this.initData();
  },
  methods:{
    initData() {
      this.isOver = 0;
      this.enablePlayAferStreamNone = false;
      this.fromPageType = 1;
    },
    public_openNoSupport() {
      this.showModal = true;
      this.isShowQrcode = false;
      import('@/utils/qr.js').then(res => {
        let qrUtil = res.default;
        let curUrl = window.location.href;
        this.qrCode = qrUtil.getQrUrl({ url: curUrl, size: 200 });
      });
    },
    clickShowQrcode() {
      this.isShowQrcode = true;
    },
    closeModal() {
      this.showModal = false;
    },
    // 获取流量是否超
    async checkVideoFlowOver() {
      this.isOver = this.isOver == 0 ? (await new Promise((resolve, reject) => {
        utilJs.getMethod(global.apiurl + 'common/checkVideoFlowOver', (res) => {
          resolve(res.isOver); // 0没超，就是能看，1：超了，就不能看
        });
      })) : this.isOver;
      return this.isOver;
    },
    public_noStreamSupport(fromType) {
      this.enablePlayAferStreamNone = true;
      if (fromType == 'datum') {
        this.fromPageType = 2;
      } else {
        this.fromPageType = 1;
      }
    },
  }
}
</script>